import { useParams } from "umi"
import type { ProColumns } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm, Switch, Modal, Space, Row, Col, Card, Pagination, Spin } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import {
  ProTable,
  PageContainer, DrawerForm, ProFormText,
  TableDropdown, ProList,
} from '@ant-design/pro-components';
import IHttp from "@/services/http.service";
import { firstValueFrom, map } from "rxjs";

type PageConfig = {
  page: number, pageSize: number, total: number, list: API.AccountPost[]
  loading: boolean
}

export default function AccountPostList() {
  const params = useParams()
  const [pageConfig, setPageConfig] = useState<PageConfig>({page: 1, pageSize: 20, total: 0, list: [], loading: false})
  useEffect(() => {
    getData()
  }, [])
  function getData(opt?: API.QueryFilterParams & {max_cursor: string}) {
    setPageConfig({...pageConfig, loading: true})
    IHttp.getAccountPosts(params.id as string, opt).subscribe(
      res => {
        if (!res.status) {
          setPageConfig({...pageConfig, loading: false})
          return
        }
        if (res.status) {
          setPageConfig({...res.data, loading: false})
        }
      }
    )
  }
  function onPageChange(page: number) {
    getData({page, max_cursor: [...pageConfig.list].pop()?.publish_timestamp?.toString() || ""})
  }
  return (
    <PageContainer
      title={""}
      content={""}
    > 
      <Spin spinning={pageConfig.loading}>
        {pageConfig.list.map(item => {
          return (
            <div className="flex flex-row items-center my-5 w-[700px]">
              <div className="w-48 rounded-md before:w-full before:block before:pb-[56.25%] bg-slate-300 bg-center bg-cover" style={{backgroundImage: `url(${item.cover})`}}></div>
              <div className="flex flex-col flex-1 ml-4">
                <h2 className="font-bold text-base">{item.title}</h2>
                <p className="mt-2">{item.publish_date}</p>
                <div className="mt-2">
                  <Space wrap>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/qAnTDC0DSpuds9Rv.png" alt="" />
                      <span className="text-[#999] ml-1">{item.view_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/wOdLWtIVZ2XE9vNZ.png" alt="" />
                      <span className="text-[#999] ml-1">{item.like_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/lp4R9JrVm7Xk63vy.png" alt="" />
                      <span className="text-[#999] ml-1">{item.danmaku_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/IuXtxcG3v5O8to0K.png" alt="" />
                      <span className="text-[#999] ml-1">{item.reply_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/QUYSPlIn2NJpI6TB.png" alt="" />
                      <span className="text-[#999] ml-1">{item.coin_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/RPCS9YBWZUQgypok.png" alt="" />
                      <span className="text-[#999] ml-1">{item.fav_count}</span>
                    </Tag>
                    <Tag className="flex flex-row items-center">
                      <img className="w-4" src="https://s1.hdslb.com/bfs/templar/york-static/929bYp7TSIAecSPG.png" alt="" />
                      <span className="text-[#999] ml-1">{item.share_count}</span>
                    </Tag>
                  </Space>
                </div>
                
              </div>
            </div>
          )
        })}
      </Spin>
      
      { pageConfig.total > pageConfig.pageSize ? (
        <div className="w-full text-center">
          <Pagination disabled={pageConfig.loading} onChange={onPageChange} showSizeChanger={false} current={pageConfig.page} pageSize={pageConfig.pageSize} total={pageConfig.total} />
        </div>
      ) : null}
      
    </PageContainer>
  )
}